<template>
    <section>
        <el-row style="margin-top:10px;">
            <el-col :span="10">
                <el-card class="bgrid-content bg-purple ox-card">
                    <div slot="header" class="clearfix">
                        <el-button type="primary" @click="addRoot">添加平级菜单</el-button>
                        <el-button type="primary" @click="addChild">添加下级菜单</el-button>
                    </div>
                    <div class="">
                        <el-input v-model="filterText" placeholder="输入关键字"></el-input>
                        <el-tree highlight-current :data="treeData" :props="defaultProps"
                                 :filter-node-method="filterNode" ref="menuTreeRef"
                                 @node-click="handleNodeClick"></el-tree>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="14">
                <el-card class="grid-content bg-purple" style="margin:0 0 0 18px;">
                    <el-form :model="editForm" labelWidth="120px" :rules="formRules" ref="editForm">
                        <el-form-item label="父级菜单">
                            <el-input v-model="editForm.parent.name" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单名称" prop="name">
                            <el-input v-model="editForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单图标" prop="icon">
                            <el-input v-model="editForm.icon"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单路径" prop="href">
                            <el-input v-model="editForm.href"></el-input>
                        </el-form-item>
                        <el-form-item label="是否显示">
                            <el-switch v-model="editForm.show" on-color="#13ce66" off-color="#ff4949" on-value="1"
                                       off-value="0"></el-switch>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input-number v-model="editForm.sort" :min="1" :max="100"></el-input-number>
                        </el-form-item>
                        <el-form-item label="权限字符串" prop="permission">
                            <el-input v-model="editForm.permission"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click.native="editSubmit('editForm')" :loading="editLoading">保存
                            </el-button>
                            <el-button type="danger" @click.native="deleteSubmit" :loading="deleteLoading">删除
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </section>
</template>
<script>
    import util from "../../common/js/util";
    import {menuTree, menuSave, menuDel} from "../../api/api";

    export default {
        data() {
            return {
                activeName: 'first',
                editForm: {
                    parent: {
                        id: '',
                        name: ''
                    },
                    name: '',
                    icon: '',
                    href: '',
                    show: '1',
                    sort: 10,
                    permission: ''
                },
                editFormVisible: true,//编辑界面是否显示
                deleteLoading: false,
                editLoading: false,
                filterText: '',
                treeData: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                formRules: {
                    name: [
                        {required: true, message: '请输入菜单名称', trigger: 'blur'}
                    ],
                    icon: [
                        {required: true, message: '请选择菜单图标', trigger: 'blur'}
                    ],
                    href: [
                        {required: true, message: '请输入菜单路径', trigger: 'blur'}
                    ]
                },
            };
        },
        methods: {
            getTreeData() {
                let para = {};
                menuTree(para).then((res) => {
                    this.treeData = res.data || [];
                });
            },
            addRoot() {

                this.editForm.parent.id = '';
                this.editForm.parent.name = '';
                this.editForm.name = '';
                this.editForm.icon = '';
                this.editForm.href = '';
                this.editForm.show = '1';
                this.editForm.sort = 10;
                this.editForm.permission = '';
                this.editForm.id = '';
                this.editForm.name = '';
            },
            addChild() {
                if (this.editForm.id && this.editForm.name) {
                    this.editForm.parent.id = this.editForm.id;
                    this.editForm.parent.name = this.editForm.name;
                    this.editForm.name = '';
                    this.editForm.icon = '';
                    this.editForm.href = '';
                    this.editForm.show = '1';
                    this.editForm.sort = 10;
                    this.editForm.permission = '';
                    this.editForm.id = '';
                    this.editForm.name = '';
                } else {
                    this.$message({
                        message: '请选择左侧菜单',
                        type: 'warning'
                    });
                }
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            handleNodeClick(data, node) {

                this.editForm = {
                    id: node.data.id,
                    name: node.data.label,
                    parent: {
                        id: node.parent.data.id,
                        name: node.parent.data.label
                    },
                    icon: node.data.icon,
                    href: node.data.href,
                    show: node.data.show,
                    sort: node.data.sort,
                    permission: node.data.permission
                };
            },
            editSubmit: function (formName) {

                let _this = this;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                        _this.editLoading = true;
                        let para = Object.assign({}, this.editForm);
                        menuSave(para).then((res) => {
                            _this.editLoading = false;
                            _this.editFormVisible = false;
                            if (res.code === 20000) {
                                _this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                _this.getTreeData();
                            } else {
                                _this.$message({
                                    message: res.message,
                                    type: 'warning'
                                });
                            }
                        });
                    }
                });
            },
            deleteSubmit: function () {

                let _this = this;
                let ids = _this.editForm.id;
                _this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {

                    _this.deleteLoading = true;
                    let para = {"id": ids};
                    menuDel(para).then((res) => {
                        _this.deleteLoading = false;
                        if (res.code === 20000) {
                            _this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            _this.getTreeData();
                        } else {
                            _this.$message({
                                message: res.message,
                                type: 'warning'
                            });
                        }
                    });
                }).catch(() => {

                });
            }
        },
        watch: {
            filterText(val) {
                this.$refs.menuTreeRef.filter(val);
            }
        },
        mounted() {
            this.getTreeData();
        }
    };
</script>
